<template>
  <div class="oj-practice-container">
    <!-- 顶部导航 -->
    <div class="oj-header">
      <div class="header-left">
        <div class="logo">XYU ACM</div>
        <div class="nav-menu">
          <el-menu mode="horizontal" :default-active="activeMenu" @select="handleMenuSelect">
            <el-menu-item index="home">首页</el-menu-item>
            <el-menu-item index="problems">题库</el-menu-item>
            <el-menu-item index="training">训练</el-menu-item>
            <el-menu-item index="contest">比赛</el-menu-item>
            <el-menu-item index="assignment">作业</el-menu-item>
            <el-menu-item index="discussion">讨论</el-menu-item>
            <el-menu-item index="records">评测记录</el-menu-item>
            <el-menu-item index="ranking">排名</el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="header-right">
        <el-dropdown>
          <span class="el-dropdown-link">
            管理域 <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>系统管理</el-dropdown-item>
            <el-dropdown-item>用户管理</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown>
          <span class="el-dropdown-link">
            更多 <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>帮助</el-dropdown-item>
            <el-dropdown-item>关于</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-reading"></i> 算法设计与分析 <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>数据结构</el-dropdown-item>
            <el-dropdown-item>算法基础</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown>
          <span class="el-dropdown-link">
            coolchao <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>计算编程思维C语言</el-breadcrumb-item>
        <el-breadcrumb-item>1程序设计初步</el-breadcrumb-item>
        <el-breadcrumb-item>1.2简易输入输出</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 主要内容区域 -->
    <div class="oj-main-content">
      <!-- 左侧：题目描述 -->
      <div class="problem-panel">
        <div class="problem-header">
          <div class="problem-title-section">
            <h2 class="problem-title">实验题目: 计算x+y的值</h2>
            <div class="problem-meta">
              <span class="score">分数: 2</span>
              <el-button type="primary" size="small">AI换置</el-button>
            </div>
          </div>
        </div>

        <div class="problem-content">
          <!-- 任务描述 -->
          <div class="problem-section">
            <h3 class="section-title">任务描述</h3>
            <div class="section-content">
              <p>编写一个程序,计算两个数的值。首先通过scanf接受两个数,存到变量x与y中,然后计算和,并用printf打印和。</p>
              <div class="example">
                <p><strong>程序运行后输入:</strong> 3 5</p>
                <p><strong>输出:</strong> 8</p>
              </div>
            </div>
          </div>

          <!-- 参考程序 -->
          <div class="problem-section">
            <h3 class="section-title">参考程序</h3>
            <div class="section-content">
              <pre class="reference-code">#include &lt;stdio.h&gt; /*预处理指令*/
/*空行*/
int main()/*主函数*/
{
    int x, y, z; /*变量定义*/
    scanf("%d%d", &x, &y); /*输入数据*/
    z=x+y;/*算术运算*/
    printf("%d", z); /*输出结果*/
    return 0; /*返回状态码*/
}</pre>
            </div>
          </div>

          <!-- 知识点 -->
          <div class="problem-section">
            <h3 class="section-title">知识点</h3>
            <div class="section-content">
              <p>暂无</p>
            </div>
          </div>

          <!-- 参考资料 -->
          <div class="problem-section">
            <h3 class="section-title">参考资料</h3>
            <div class="section-content">
              <div class="reference-links">
                <div class="reference-item">
                  <span class="ref-number">1.</span>
                  <a href="https://www.runoob.com/cprogramming/c-variables.html" target="_blank">C 变量 - runoob.com</a>
                  <p class="ref-desc">变量定义、声明和初始化，理解输入存储</p>
                </div>
                <div class="reference-item">
                  <span class="ref-number">2.</span>
                  <a href="https://www.tutorialspoint.com/c_standard_library/c_function_scanf.htm" target="_blank">scanf 函数 - tutorialspoint.com</a>
                  <p class="ref-desc">scanf函数用法，读取输入</p>
                </div>
                <div class="reference-item">
                  <span class="ref-number">3.</span>
                  <a href="https://www.tutorialspoint.com/c_standard_library/c_function_printf.htm" target="_blank">printf 函数 - tutorialspoint.com</a>
                  <p class="ref-desc">printf函数用法，输出结果</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间：代码编辑区 -->
      <div class="code-panel">
        <div class="code-header">
          <div class="code-tabs">
            <el-tabs v-model="activeTab" type="card">
              <el-tab-pane label="源文件" name="code"></el-tab-pane>
              <el-tab-pane label="操作记录" name="record"></el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <div class="code-content">
          <!-- 代码编辑器 -->
          <div v-if="activeTab === 'code'" class="code-editor-container">
            <div class="editor-wrapper">
              <div class="editor-header">
                <span class="file-name">Test</span>
                <div class="editor-actions">
                  <el-button size="mini" type="text" @click="fullscreenEditor">
                    <i class="el-icon-full-screen"></i> 全屏
                  </el-button>
                </div>
              </div>
              <div class="code-editor" ref="codeEditor">
                <div class="line-numbers">
                  <div v-for="i in codeLines" :key="i" class="line-number">{{ i }}</div>
                </div>
                <textarea 
                  class="code-textarea" 
                  v-model="codeContent" 
                  placeholder="在这里输入您的代码..."
                  @input="updateLineNumbers"
                  ref="codeTextarea"
                ></textarea>
              </div>
            </div>

            <!-- 输入区域 -->
            <div class="input-section">
              <div class="input-header">
                <span>如果程序需要输入值,请在下方依次添加输入框并填写数值</span>
                <el-button size="mini" type="primary" @click="addInputField">添加</el-button>
              </div>
              <div class="input-fields">
                <div v-for="(input, index) in inputFields" :key="index" class="input-field">
                  <el-input 
                    v-model="input.value" 
                    :placeholder="`输入值 ${index + 1}`"
                    size="small"
                    style="width: 200px"
                  />
                  <el-button size="mini" type="danger" @click="removeInputField(index)">删除</el-button>
                </div>
              </div>
            </div>

            <!-- 执行控制 -->
            <div class="execution-controls">
              <el-button type="success" size="medium" @click="compileAndRun">
                <i class="el-icon-video-play"></i> 编译并运行
              </el-button>
              <el-button type="warning" size="medium" @click="resetCompiler">
                <i class="el-icon-refresh"></i> 重置编译器
              </el-button>
            </div>

            <!-- 控制台输出 -->
            <div class="console-output">
              <div class="console-header">
                <span>控制台输出</span>
              </div>
              <div class="console-content">
                <div v-for="(output, index) in consoleOutputs" :key="index" class="output-line">
                  {{ output }}
                </div>
                <div v-if="isCompiling" class="output-line compiling">
                  正在准备编译环境...
                </div>
              </div>
            </div>
          </div>

          <!-- 操作记录 -->
          <div v-if="activeTab === 'record'" class="record-container">
            <div class="record-header">
              <h3>操作记录</h3>
            </div>
            <div class="record-content">
              <div v-for="(record, index) in operationRecords" :key="index" class="record-item">
                <div class="record-time">{{ record.time }}</div>
                <div class="record-action">{{ record.action }}</div>
                <div class="record-result">{{ record.result }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：AI评价 -->
      <div class="ai-panel">
        <div class="ai-evaluation">
          <h3>代码评价</h3>
          <div class="evaluation-content">
            <div class="evaluation-item">
              <h4>代码完整性(按照知识点):</h4>
              <p>{{ aiEvaluation.completeness }}</p>
            </div>
            <div class="evaluation-item">
              <h4>代码完成度:</h4>
              <p>{{ aiEvaluation.completion }}分。</p>
            </div>
            <div class="evaluation-item">
              <h4>代码正确性:</h4>
              <p>{{ aiEvaluation.correctness }}</p>
            </div>
          </div>
        </div>

        <div class="ai-suggestions">
          <h3>修改建议</h3>
          <div class="suggestions-content">
            <div v-for="(suggestion, index) in aiSuggestions" :key="index" class="suggestion-item">
              <span class="suggestion-number">{{ index + 1 }}.</span>
              <span class="suggestion-text">{{ suggestion }}</span>
            </div>
          </div>
        </div>

        <div class="final-score">
          <h3>最终评分(满分{{ currentProblem.score }}分)</h3>
          <div class="score-display">
            <span class="score-value">{{ finalScore }}</span>
            <span class="score-unit">分。</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OjPractice",
  data() {
    return {
      // 当前题目
      currentProblem: {
        id: 'P1001',
        problemName: '计算x+y的值',
        score: 2,
        difficulty: '简单',
        timeLimit: 1000,
        memoryLimit: 125
      },
      
      // 导航菜单
      activeMenu: 'assignment',
      
      // 代码内容
      codeContent: `#include <stdio.h>
int main(){
//双斜杠前面填写相关代码以实现功能
return 0;
}`,
      
      // 代码编辑相关
      activeTab: 'code',
      codeLines: 5,
      
      // 输入字段
      inputFields: [
        { value: '3' },
        { value: '5' }
      ],
      
      // 控制台输出
      consoleOutputs: [],
      isCompiling: false,
      
      // 操作记录
      operationRecords: [
        {
          time: '2025-01-29 10:30:15',
          action: '编译并运行',
          result: '编译成功，运行通过'
        }
      ],
      
      // AI评价
      aiEvaluation: {
        completeness: '代码中缺少了接收输入和计算输出部分,仅包含main函数和返回语句,不满足题目要求。',
        completion: 0,
        correctness: '0分,由于代码不完整,无法正确执行题目要求的功能。'
      },
      
      // AI建议
      aiSuggestions: [
        '在main函数中添加接收两个数(x和y)的代码,使用scanf函数实现。',
        '计算x和y的和,并使用printf函数打印结果。',
        '确保在代码结束前使用return语句返回0,表示程序正常结束。'
      ],
      
      // 最终评分
      finalScore: 0
    }
  },
  
  mounted() {
    this.updateLineNumbers()
  },
  
  methods: {
    // 更新行号
    updateLineNumbers() {
      const lines = this.codeContent.split('\n').length
      this.codeLines = Math.max(lines, 5)
    },
    
    // 添加输入字段
    addInputField() {
      this.inputFields.push({ value: '' })
    },
    
    // 删除输入字段
    removeInputField(index) {
      this.inputFields.splice(index, 1)
    },
    
    // 编译并运行
    compileAndRun() {
      this.isCompiling = true
      this.consoleOutputs = []
      
      // 模拟编译过程
      setTimeout(() => {
        this.consoleOutputs.push('正在准备编译环境...')
        setTimeout(() => {
          this.consoleOutputs.push('运行编译成功')
          this.isCompiling = false
          this.evaluateCode()
        }, 1000)
      }, 500)
    },
    
    // 重置编译器
    resetCompiler() {
      this.codeContent = `#include <stdio.h>
int main(){
//双斜杠前面填写相关代码以实现功能
return 0;
}`
      this.inputFields = [{ value: '3' }, { value: '5' }]
      this.consoleOutputs = []
      this.finalScore = 0
      this.updateLineNumbers()
    },
    
    // 代码评价
    evaluateCode() {
      // 简单的代码评价逻辑
      let score = 0
      let completeness = ''
      let correctness = ''
      
      if (this.codeContent.includes('scanf') && this.codeContent.includes('printf')) {
        score = 2
        completeness = '代码包含了必要的输入输出功能，满足题目要求。'
        correctness = '2分,代码能够正确执行题目要求的功能。'
      } else {
        score = 0
        completeness = '代码中缺少了接收输入和计算输出部分,仅包含main函数和返回语句,不满足题目要求。'
        correctness = '0分,由于代码不完整,无法正确执行题目要求的功能。'
      }
      
      this.finalScore = score
      this.aiEvaluation.completion = score
      this.aiEvaluation.completeness = completeness
      this.aiEvaluation.correctness = correctness
    },
    
    // 全屏编辑器
    fullscreenEditor() {
      this.$message.info('全屏功能开发中...')
    },
    
    // 处理导航菜单选择
    handleMenuSelect(key) {
      this.activeMenu = key
      this.$message.info(`切换到${key}页面`)
    }
  }
}
</script>

<style lang="scss" scoped>
.oj-practice-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.oj-header {
  background: white;
  padding: 16px 24px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 24px;
    
    .logo {
      font-size: 18px;
      font-weight: bold;
      color: #409eff;
    }
    
    .nav-menu {
      .el-menu {
        border: none;
        background: transparent;
        
        .el-menu-item {
          height: 40px;
          line-height: 40px;
          padding: 0 16px;
          font-size: 14px;
          
          &:hover {
            background: #f0f9ff;
            color: #409eff;
          }
          
          &.is-active {
            background: #409eff;
            color: white;
          }
        }
      }
    }
  }
  
  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .el-dropdown-link {
      cursor: pointer;
      color: #606266;
      font-size: 14px;
      
      &:hover {
        color: #409eff;
      }
    }
  }
}

.breadcrumb-container {
  background: white;
  padding: 12px 24px;
  border-bottom: 1px solid #e4e7ed;
}

.oj-main-content {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}

.problem-panel {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  
  .problem-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e4e7ed;
    
    .problem-title-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .problem-title {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #303133;
      }
      
      .problem-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        
        .score {
          font-size: 16px;
          font-weight: 600;
          color: #409eff;
        }
      }
    }
  }
  
  .problem-content {
    padding: 24px;
    
    .problem-section {
      margin-bottom: 32px;
      
      .section-title {
        margin: 0 0 16px 0;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        border-left: 4px solid #409eff;
        padding-left: 12px;
      }
      
      .section-content {
        line-height: 1.6;
        color: #606266;
        
        .example {
          background: #f8f9fa;
          padding: 16px;
          border-radius: 6px;
          margin-top: 12px;
          
          p {
            margin: 0 0 8px 0;
            
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
        
        .reference-code {
          background: #f8f9fa;
          padding: 16px;
          border-radius: 6px;
          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
          font-size: 13px;
          line-height: 1.4;
          color: #303133;
          overflow-x: auto;
          border: 1px solid #e4e7ed;
        }
        
        .reference-links {
          .reference-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 16px;
            
            .ref-number {
              font-weight: 600;
              color: #409eff;
              margin-right: 8px;
              min-width: 20px;
            }
            
            a {
              color: #409eff;
              text-decoration: none;
              margin-right: 8px;
              
              &:hover {
                text-decoration: underline;
              }
            }
            
            .ref-desc {
              color: #909399;
              font-size: 12px;
              margin: 4px 0 0 28px;
            }
          }
        }
      }
    }
  }
}

.code-panel {
  flex: 1.2;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  
  .code-header {
    border-bottom: 1px solid #e4e7ed;
    
    .code-tabs {
      .el-tabs__header {
        margin: 0;
        padding: 0 20px;
      }
    }
  }
  
  .code-content {
    flex: 1;
    overflow: hidden;
    
    .code-editor-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      
      .editor-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 300px;
        
        .editor-header {
          padding: 12px 16px;
          background: #f8f9fa;
          border-bottom: 1px solid #e4e7ed;
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .file-name {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 14px;
            color: #606266;
          }
        }
        
        .code-editor {
          flex: 1;
          display: flex;
          background: #fafafa;
          border-radius: 0 0 8px 8px;
          
          .line-numbers {
            background: #f0f0f0;
            padding: 16px 8px;
            border-right: 1px solid #e4e7ed;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 12px;
            color: #909399;
            text-align: right;
            min-width: 40px;
            
            .line-number {
              line-height: 1.5;
              height: 18px;
            }
          }
          
          .code-textarea {
            flex: 1;
            border: none;
            outline: none;
            padding: 16px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 14px;
            line-height: 1.5;
            resize: none;
            background: #fafafa;
          }
        }
      }
      
      .input-section {
        padding: 16px;
        border-top: 1px solid #e4e7ed;
        
        .input-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          
          span {
            color: #606266;
            font-size: 14px;
          }
        }
        
        .input-fields {
          .input-field {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
          }
        }
      }
      
      .execution-controls {
        padding: 16px;
        display: flex;
        gap: 12px;
        border-top: 1px solid #e4e7ed;
      }
      
      .console-output {
        flex: 1;
        border-top: 1px solid #e4e7ed;
        min-height: 120px;
        
        .console-header {
          padding: 12px 16px;
          background: #f8f9fa;
          border-bottom: 1px solid #e4e7ed;
          font-weight: 600;
          color: #303133;
        }
        
        .console-content {
          padding: 16px;
          background: #f8f9fa;
          height: 100px;
          overflow-y: auto;
          
          .output-line {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 13px;
            line-height: 1.4;
            margin-bottom: 4px;
            
            &.compiling {
              color: #409eff;
            }
          }
        }
      }
    }
    
    .record-container {
      height: 100%;
      overflow-y: auto;
      
      .record-header {
        padding: 16px;
        border-bottom: 1px solid #e4e7ed;
        
        h3 {
          margin: 0;
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }
      
      .record-content {
        padding: 16px;
        
        .record-item {
          display: flex;
          justify-content: space-between;
          padding: 12px;
          border: 1px solid #e4e7ed;
          border-radius: 6px;
          margin-bottom: 8px;
          
          .record-time {
            color: #909399;
            font-size: 12px;
          }
          
          .record-action {
            color: #409eff;
            font-weight: 500;
          }
          
          .record-result {
            color: #67c23a;
            font-weight: 500;
          }
        }
      }
    }
  }
}

.ai-panel {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  .ai-evaluation,
  .ai-suggestions,
  .final-score {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 16px;
    border: 2px solid #f56c6c;
    
    h3 {
      margin: 0 0 12px 0;
      font-size: 16px;
      font-weight: 600;
      color: #f56c6c;
    }
    
    .evaluation-content {
      .evaluation-item {
        margin-bottom: 12px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        h4 {
          margin: 0 0 8px 0;
          font-size: 14px;
          font-weight: 600;
          color: #303133;
        }
        
        p {
          margin: 0;
          color: #606266;
          line-height: 1.5;
        }
      }
    }
    
    .suggestions-content {
      .suggestion-item {
        display: flex;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .suggestion-number {
          font-weight: 600;
          color: #409eff;
          margin-right: 8px;
          min-width: 20px;
        }
        
        .suggestion-text {
          color: #606266;
          line-height: 1.5;
        }
      }
    }
    
    .score-display {
      text-align: center;
      
      .score-value {
        font-size: 32px;
        font-weight: bold;
        color: #f56c6c;
      }
      
      .score-unit {
        font-size: 16px;
        color: #606266;
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .oj-main-content {
    flex-direction: column;
    
    .ai-panel {
      width: 100%;
      flex-direction: row;
      flex-wrap: wrap;
      
      .ai-evaluation,
      .ai-suggestions,
      .final-score {
        flex: 1;
        min-width: 300px;
      }
    }
  }
}

@media (max-width: 768px) {
  .oj-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    
    .header-left {
      flex-direction: column;
      gap: 12px;
      
      .nav-menu {
        width: 100%;
        
        .el-menu {
          justify-content: center;
        }
      }
    }
  }
  
  .oj-main-content {
    padding: 12px;
    gap: 12px;
    
    .ai-panel {
      flex-direction: column;
      
      .ai-evaluation,
      .ai-suggestions,
      .final-score {
        flex: none;
        min-width: auto;
      }
    }
  }
}
</style> 